import styled from "styled-components";

const LongforItemWrapper = styled.div`
	flex-shrink: 0;
	width: 20%;

	.inner {
		margin: 8px;

		.item-info {
			position: relative;
			border-radius: 3px;
			overflow: hidden;

			.cover {
				width: 100%;
			}
			.bg-cover {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 60%;
				background-image: linear-gradient(-180deg, rgba(0,0,0,0) 3%, rgb(0,0,0) 100%);
			}

			.info {
				position: absolute;
				left: 8px;
				right: 8px;
				bottom: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-content: center;
				padding: 0 24px 32px;
				color: #fff;

				.city {
					font-size: 18px;
					font-weight: 600;
					text-align: center;
				}
				
				.price {
					margin-top: 5px;
					font-size: 14px;
					text-align: center;
				}
			}
		}
	}
`

export default LongforItemWrapper